/*  -- flex弹性布局 -- */

.flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
}

.flex-sub {
	flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}

.flex-grow {
	flex-grow: 1;
}

.flex-direction {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

.self-stretch {
	align-self: stretch;
}

.align-stretch {
	align-items: stretch;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

/*  -- 定位  -- */

.p_relative {
	position: relative;
}

/*  -- 文字对齐方式 -- */

 .bold {
	 font-weight: bold;
 }
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

/*  --  文字颜色  --  */
.color_fff {
	color: #FFFFFF;
}
.color_AAAAAA {
	color: #CCCCCC;
}
.color_222222 {
	color: #222222;
}

.color_6D6D6D {
	color: #6D6D6D;
}

.color_E5725F {
	color: #E5725F;
}

.color_FF583A {
	color: #FF583A;
}

.bg_color_F8F8F8 {
	background: #F8F8F8;
}

.bg_color_fff {
	background: #FFFFFF;
}

.bg_color_E5725F {
	background: #E5725F;
}

@for $i from 1 through 50 { // 取值范围是1～50px
    // 字体大小
    .fontS#{$i} {
        font-size: #{$i}rpx;
    }
	/*文本内容超宽度省略号显示 多行*/
	.text-beyond-multi#{$i} {
		display: -webkit-box ;
		white-space: normal;//换行
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: #{$i};
	}
}

@for $j from 1 through 100 {
	// 外边距
	.mar_top#{$j} {
	    margin-top: #{$j}rpx;
	}
	.mar_bottom#{$j} {
	    margin-bottom: #{$j}rpx;
	}
	.mar_right#{$j} {
	    margin-right: #{$j}rpx;
	}
	.mar_left#{$j} {
	    margin-left: #{$j}rpx;
	}
	.margin_l_r#{$j} {
		margin: 0 #{$j}rpx;
	}
	
	// 内边距
	.pad_top#{$j} {
	    padding-top: #{$j}rpx;
	}
	.pad_bottom#{$j} {
	    padding-bottom: #{$j}rpx;
	}
	.pad_left#{$j} {
	    padding-left: #{$j}rpx;
	}
	.pad_right#{$j} {
	    padding-right: #{$j}rpx;
	}
	.padding_l_r#{$j} {
		padding: 0 #{$j}rpx;
	}
	
	// 图标宽度
	.width_#{$j} {
		width: #{$j}rpx;
	}
	// 图标高度
	.height_#{$j} {
		height: #{$j}rpx;
	}
}



	::v-deep ::-webkit-scrollbar {
		/* 滚动条整体样式 */
		display: block;
		width: 10rpx !important;
		height: 10rpx !important;
		-webkit-appearance: auto !important;
		overflow: auto !important;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		/* 滚动条里面小方块 */
		border-radius: 10rpx !important;
		box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #E5725F !important;
	}

	::v-deep ::-webkit-scrollbar-track {
		/* 滚动条 */
		border-radius: 10rpx !important;
		box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #fff !important;
	}